<template>
  <component
    :is="compData.type"
    class="comp-content"
    :style="compStyle(compData)"
    :compData="compData"
  />
</template>
<script>
  import searchBlock from './searchBlock/index.vue';
  import noticeBlock from './noticeBlock/index.vue';
  import menuButton from './menuButton/index.vue';
  import listClass from './listClass/index.vue';
  import menuSwiper from './menuSwiper/index.vue';
  import menuBanner from './menuBanner/index.vue';
  import menuList from './menuList/index.vue';
  import menuGrid from './menuGrid/index.vue';
  import signCard from './signCard/index.vue';
  import goodsCard from './goodsCard/index.vue';
  import goodsClass from './goodsClass/index.vue';
  import goodsShelves from './goodsShelves/index.vue';
  import yanxuangoods from './yanxuangoods/index.vue';
  import imageBlock from './imageBlock/index.vue';
  import imageBlock1 from './imageBlock1/index.vue';
  import imageBanner from './imageBanner/index.vue';
  import titleBlock from './titleBlock/index.vue';
  import imageCube from './imageCube/index.vue';
  import videoPlayer from './videoPlayer/index.vue';
  import lineBlock from './lineBlock/index.vue';
  import richtext from './richText/index.vue';
  import hotzone from './hotzone/index.vue';
  import groupon from './groupon/index.vue';
  import seckill from './seckill/index.vue';
  import scoreGoods from './scoreGoods/index.vue';
  import mplive from './mplive/index.vue';
  import coupon from './coupon/index.vue';
  // import subscribeWechatOfficialAccount from "./subscribeWechatOfficialAccount/index.vue";

  import userCard from './userCard/index.vue';
  import orderCard from './orderCard/index.vue';
  import walletCard from './walletCard/index.vue';
  import couponCard from './couponCard/index.vue';
  import extend7 from './extend7/index.vue'
  import customNavbar from './customNavbar/index.vue'
  import groupList from './groupList/index.vue'
  import activityShelves from './activityShelves/index.vue'
  import promotionCard from './promotionCard/index.vue'
  import category from './category/index.vue';
  import shopGoodsList from './shopGoodsList/index.vue';
  import shopGoodsList1 from './shopGoodsList1/index.vue';
  import blankView from './blankView/index.vue';
  import summerNewOne from './summerNewOne/index.vue';
  import summerNewSecond from './summerNewSecond/index.vue';
  import wuyiOne from './wuyiOne/index.vue';
  import wuyiTwo from './wuyiTwo/index.vue';
  import orderCardNew from './orderCardNew/index.vue';
  import platformReco from './platformReco/index.vue';
  import jxshopBlock from './jxshopBlock/index.vue';
  import categoryTabs from './categoryTabs/index.vue';
  import menuBlock from './menuBlock/index.vue';
  import offerBlock from './offerBlock/index.vue';
  export default {
    components: {
      searchBlock,
      noticeBlock,
      menuButton,
      listClass,
      menuSwiper,
      menuList,
      imageBlock1,
      groupList,
      menuGrid,
      goodsCard,
      menuBanner,
      goodsClass,
	  jxshopBlock,
	  platformReco,
      goodsShelves,
      yanxuangoods,
      imageBlock,
      imageBanner,
      titleBlock,
      imageCube,
      videoPlayer,
      lineBlock,
      richtext,
      customNavbar,
      hotzone,
      groupon,
      seckill,
      scoreGoods,
      mplive,
      coupon,
      // subscribeWechatOfficialAccount,
      
      userCard,
      orderCard,
      walletCard,
      couponCard,
      extend7,
      activityShelves,
      promotionCard,
      category,
      shopGoodsList,
      shopGoodsList1,
      blankView,
      summerNewOne,
      summerNewSecond,
      wuyiOne,
      wuyiTwo,
      signCard,
      orderCardNew,
	  categoryTabs,
	  menuBlock,
	  offerBlock
    },
  };
</script>
<script setup>
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  const props = defineProps(['compData']);

  // 组件样式
  function compStyle(element) {
    let height = {};
    let padding = {};
    if (element.style) {
      if (element.style.height || element.style.height == 0) {
        height = {
          height: `${element.style.height}px`,
        };
      }
      if (element.style.padding || element.style.padding == 0) {
        padding = {
          padding: `${element.style.padding}px`,
        };
      }
      return {
        background:
          element.style.background &&
          (element.style.background.type == 'color'
            ? element.style.background.bgColor
            : element.style.background.bgImage
            ? 'url(' + checkUrl(element.style.background.bgImage) + ')'
            : ''),
        'margin-top': element.style.marginTop + 'px',
        'margin-right': element.style.marginRight + 'px',
        'margin-bottom': element.style.marginBottom + 'px',
        'margin-left': element.style.marginLeft + 'px',
        'border-top-left-radius': element.style.borderRadiusTop + 'px',
        'border-top-right-radius': element.style.borderRadiusTop + 'px',
        'border-bottom-left-radius': element.style.borderRadiusBottom + 'px',
        'border-bottom-right-radius': element.style.borderRadiusBottom + 'px',
        ...height,
        ...padding,
      };
    }
  }
</script>
